<template>
  <div class="home">
    <template v-for="item in list">
      <card-item :item="item" :key="item.id">
        <template #footer>
          <!-- .stop防止事件冒泡 -->
          <van-button size="small" @click.stop="handleToCart(item)">
            加入购物车
          </van-button>
        </template>
      </card-item>
    </template>
  </div>
</template>
<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import CardItem from '../components/CardItem.vue'
import { debounce } from 'lodash'
export default {
  components: { CardItem },
  data() {
    return {
      opt: { page: 1, size: 30 },
    }
  },
  computed: {
    ...mapState(['list']),
  },
  methods: {
    ...mapActions(['getCartList']),
    ...mapMutations(['toCart']),
    // 添加进入购物车，防抖函数使用
    handleToCart: debounce(function (item) {
      this.toCart(item)
    }, 500),
  },
  created() {
    console.log('home----created生命周期')
    // keep-alive的效果说明：
    // 1. 加上keep-alive之后，这个生命周期只会在初始化加载页面的时候，执行一次，随后就不在执行了，
    // 也就是不请求数据了，不请求数据，页面就不渲染，久停留在了原先的位置
    // 2. 但是，这个组件如果还行更新怎么办？
    // 3. keep-alive有他自己的生命周期，咱们称为钩子函数 activated.可以在这个生命周期中，根据业务需求去更新数据
    this.getCartList(this.opt)
  },
  activated() {
    console.log('activated: 我是actived钩子函数')
  },
  deactivated() {
    console.log('deactivated: 我是deactivated钩子函数')
  },
  mounted() {
    console.log('home-mounted生命周期')
  },
}
</script>
